<template>
	<theme-box title="账户管理列表">
	  <style>
			.dataTable {
				table-layout: fixed;
			}
			.dataTable td {
				word-break:break-all;
			}
		</style>
		<form class="form-inline" @submit.prevent v-el:searchform>
			<div class="form-group">
				<label>商户编号：</label>
				<input type="text" class="form-control" v-el:searchid>
			</div>
			<v-button theme="warning" class="pull-right" @click="reset">重置</v-button>
			<v-button theme="primary" class="pull-right" @click="search">查询</v-button>
		</form>
		<table class="table table-bordered table-striped" v-el:table>
		</table>
		<!-- 弹出层 -->
		<edit-modal :model="model" v-ref:modal></edit-modal>
	</theme-box>
</template>

<style scoped>
	.form-inline .btn+.btn {
		margin-right: 10px;
	}
	
	.form-inline .form-group+.form-group {
		margin-left: 20px;
	}
</style>

<script> 
	import Control from './list.control.vue';
  import Modal from './list.modal.vue';
	
	let datatable;
	export default {
		components: {
			'edit-modal': Modal
		},		
		data: () => ({
			dataSet: {
				data: [],
				recordsTotal: 0,
				recordsFiltered: 0
			},
			columnsSet: [],
			model: {}
		}),
    events: {
      'table-reload': function () {
      	datatable.api().ajax.reload();
			}
    }, 		
		methods: {
			  reset() {
					this.$els.searchform.reset();
					datatable.api().ajax.reload();
				},
				search() {
					datatable.api().ajax.reload();
				},
				setConfig() {
					//..加载配置 
					let self = this;
					this.columnsSet = [
					{
							title: "商户编号",
							data: "id.mchtId",
							className: "first-td",
						  width: "68px"
					},
					{
							title: " 机构编号",
							data: "id.brhNo"			
					},												
					{
							title: "微信url",
							data: "url",
						  width: "200px"
					},						
					{
							title: "微信账号",
							data: "nickname"
					},
					{
							title: "微信token",
							data: "token"
					},						
					{
							title: "公众号appid",
							data: "appid"
					},						
					{
							title: "微信appsecret",
							data: "appsecret"
					},
					{
							title: "微信类型",
							data: "wechatType",
						  render: function(data) {
								return (data==1)?"订阅号":"服务号";
							}
						
					},								
					{
						title: "相关操作",
						name: "edit",
						className: "edit",
						data: null,
						defaultContent: "",
						width: "110px"						
					}
			];
				},
				loadData(data = {}) {
					//..加载数据
					let self = this;
					return new Promise(function (resolve, reject) {
						self.$post({
							url: '/api/v1' + projectName_Url + '/wechat/mcht/query.html',
							data
						}).then( response => {	
							if (response) {
								let content = response.content;
								self.dataSet.data = content.mchtList;
								self.dataSet.recordsTotal = content.total;
								self.dataSet.recordsFiltered = content.total;
								return resolve();
							}
						}, response => {
							  return reject();
						});

					})
				}
		},
		created() {
			this.setConfig();
		},
		ready() {
			let self = this;

			datatable = $(this.$els.table).dataTable({
				"columns": self.columnsSet,
//				"autowidth": true , 
				"fnCreatedRow": function (row, data, index) {
					let dom = this.api().cell(row, 'edit:name').node();
					let editView = new Vue(Control);
					//editView.model = data;
					data.brhNo = data.id.brhNo;
					data.mchtId = data.id.mchtId;
					editView.$set("id",data.id.brhNo);
					editView.$set("subid",data.id.mchtId);					
					editView.$set("name",data.nickname);
					
					editView.$on("edit", function () {
						self.model = _.cloneDeep(data);
						self.$refs.modal.init();
					});
					
					editView.$on("reload", function () {
						self.reset();
					});
					
					editView.$mount().$appendTo(dom);
				},
				"paging": true,
				"pagingType": "full_numbers",
				"lengthChange": false,
				"searching": false,
				"ordering": false,
				"info": true,
				"autoWidth": false,
				"serverSide": true,
				"processing": true,
				"ajax": function (data, callback, settings) {

					let result = {};
					let _data = {};

					_data.aoData = JSON.stringify([{
						"name": "iDisplayStart",
						"value": 1 + data.start / data.length
									}, {
						"name": "iDisplayLength",
						"value": data.length
									}]);
					
					$(self.$els.searchform).find("input").each(function () {
						$(this).val($.trim($(this).val()));
					});
					
          _data.mchtId = self.$els.searchid.value;
					
					self.loadData(_data).then(function () {
						result = self.dataSet;
						if (!result.data) {
							result.data = [];
						}
						callback(result);
					}, function () {
						result.data = [];
						callback(result);
					})

				},
				"initComplete": function (settings, json) {
				},
				"fnDrawCallback": function( settings ) {
					let count = Math.ceil(settings._iRecordsTotal/settings._iDisplayLength);
					if(count<=1) {
						  $('.dataTables_paginate').hide();
					} else {
						  $('.dataTables_paginate').show();
					}
				}

			});
		}
	}
</script>